<template>
    <view class="container">
        <button @click="toggleStream">{{ streaming ? '停止监听' : '开始报名' }}</button>
        <view class="status-box">
            <text>当前状态：{{ statusText }}</text>
            <text v-if="gameId">游戏ID：{{ gameId }}</text>
            <text>当前状态：{{ buffer }}</text>
            <!-- 新增倒计时显示 -->
            <text v-if="countdown > 0">倒计时：{{ countdown }} 秒</text>
        </view>
    </view>
</template>

<script>
	// 测试用 豆包处理
    // 流式接口地址
    const reqUrl = "http://192.168.1.30:9000"
    const STREAM_API = reqUrl + '/api/TakePhoto/tpcreate?openid=12151515'

    export default {
        data() {
            return {
                streaming: false,
                statusText: '等待连接',
                gameId: null,
                controller: null,
                buffer: '', // 数据缓冲区
                countdown: 0, // 新增倒计时变量
                startTime: 0 // 新增开始时间变量
            }
        },
        methods: {
            async toggleStream() {
                if (this.streaming) {
                    this.stopStream()
                } else {
                    await this.startStream()
                }
            },

            async startStream() {
                try {
                    this.initState()
                    this.controller = new AbortController()

                    const response = await fetch(STREAM_API, {
                        method: 'GET',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        // body: JSON.stringify({ /* 你的请求参数 */ }),
                        signal: this.controller.signal
                    })

                    await this.processStream(response)
                } catch (error) {
                    this.handleError(error)
                }
            },

            // 初始化状态
            initState() {
                this.streaming = true
                this.statusText = '连接服务中...'
                this.gameId = null
                this.buffer = ''
                this.countdown = 0 // 初始化倒计时
                this.startTime = 0 // 初始化开始时间
            },

            // 处理数据流
            async processStream(response) {
                if (!response.ok) throw new Error(`HTTP错误 ${response.status}`)
                if (!response.body) throw new Error('无响应内容')

                const reader = response.body.getReader()
                const decoder = new TextDecoder('utf-8')

                while (this.streaming) {
                    const {
                        done,
                        value
                    } = await reader.read()
                    if (done) break

                    // 处理数据块
                    this.buffer += decoder.decode(value, {
                        stream: true
                    })
                    console.log(this.buffer);

                    // // 微信环境下需要强制更新视图
                    // this.$forceUpdate()

                    this.processBuffer()
                }
            },

            // 处理缓冲区数据
            processBuffer() {
                while (true) {
                    // 定位数据块起始和结束位置
                    const startIdx = this.buffer.indexOf('[DONE]')
                    const endIdx = this.buffer.indexOf('[END]')

                    // 需要至少找到一个完整数据块
                    if (startIdx === -1 || endIdx === -1 || endIdx < startIdx) return

                    // 提取有效数据部分
                    const chunk = this.buffer.slice(
                        startIdx + 6, // '[DONE]' 长度6
                        endIdx
                    )

                    // 更新缓冲区（保留未处理部分）
                    this.buffer = this.buffer.slice(endIdx + 5) // '[END]' 长度5

                    // 解析数据
                    const params = this.parseChunk(chunk)
                    this.handleParams(params)
                }
            },

            // 解析数据块
            parseChunk(chunk) {
                const params = new URLSearchParams(chunk)
                return {
                    code: parseInt(params.get('code')),
                    msg: params.get('msg'),
                    gameId: params.get('GameID'),
                    starttime: parseInt(params.get('starttime')) ? parseInt(params.get('starttime')) : null,
                    Countdown: parseInt(params.get('Countdown')) ? parseInt(params.get('Countdown')) : null
                }
            },

            // 处理解析后的参数
            handleParams({
                code,
                msg,
                gameId,
                starttime,
                Countdown
            }) {
                switch (code) {
                    case 200:
                        this.statusText = `✅ ${msg}`
                        this.gameId = gameId
                        this.stopStream() // 结束长链接
                        break
                    case 201:
                        this.statusText = `✅ ${msg}`
                        this.gameId = gameId
                        break
                    case 202:
                        this.statusText = `✅ ${msg}`
                        this.gameId = gameId
                        this.startTime = starttime
                        this.countdown = Countdown
                        this.startCountdown() // 开始倒计时
                        break
                    case 4001:
                        this.statusText = `❌ 参数错误`
                        this.stopStream()
                        break
                    case 4002:
                        this.statusText = `❌ 设备-离线中`
                        this.stopStream()
                        break
                    case 4003:
                        this.statusText = `❌ 设备-体验中`
                        this.stopStream()
                        break
                    case 4004:
                        this.statusText = `❌ 请求失败`
                        this.stopStream()
                        break
                    case 40005:
                        this.statusText = `❌ 设备信号异常，请重新连接！`
                        this.stopStream()
                        break
                    default:
                        this.statusText = `⚠️ 未知状态码: ${code}`
                }

                // 微信环境下需要强制更新视图
                this.$forceUpdate()
            },

            // 开始倒计时
            startCountdown() {
                const intervalId = setInterval(() => {
                    if (!this.streaming) {
                        clearInterval(intervalId)
                        return
                    }
                    const currentTime = Date.now()
                    const elapsedTime = currentTime - this.startTime
                    const remainingTime = Math.max(0, this.countdown - Math.floor(elapsedTime / 1000))
                    this.countdown = remainingTime
                    if (remainingTime === 0) {
                        clearInterval(intervalId)
                    }
                    // 微信环境下需要强制更新视图
                    this.$forceUpdate()
                }, 1000)
            },

            // 停止流式传输
            stopStream() {
                if (this.controller) {
                    this.controller.abort()
                    this.controller = null
                }
                this.streaming = false
                this.buffer = ''
                this.countdown = 0 // 重置倒计时
                this.startTime = 0 // 重置开始时间
            },

            // 错误处理
            handleError(error) {
                if (error.name === 'AbortError') {
                    this.statusText = '⏹ 已手动停止'
                } else {
                    console.error('请求失败:', error)
                    this.statusText = `❌ 错误: ${error.message}`
                }
                this.$forceUpdate()
            }
        }
    }
</script>

<style>
    .container {
        padding: 20px;
    }

    button {
        background-color: #07c160;
        color: white;
        padding: 15px 30px;
        border-radius: 25px;
        font-size: 16px;
    }

    .status-box {
        margin-top: 20px;
        padding: 15px;
        background-color: #f7f7f7;
        border-radius: 10px;
    }

    .status-box text {
        display: block;
        margin: 8px 0;
        font-size: 14px;
        color: #333;
    }
</style>